<template>
    <div class="artist">
        <h1>传承人介绍</h1>
        <el-card>
        <template #header>
            <div class="card-header">
                
            </div>
        </template>
        <el-table :data="tableData" border >
            <el-table-column prop="artist_name" label="姓名"  width="80%"/>
            <el-table-column prop="gender" label="性别" width="70%"/>
            <el-table-column prop="birth_date" label="出生日期" />
            <el-table-column prop="artist_image" label="图片" />
            <el-table-column prop="region" label="地区" />
            <el-table-column prop="artistic_achievements" label="艺术成就" />
            <el-table-column prop="contact_info" label="邮箱地址" />
            <el-table-column label="操作" fixed="right">
            <template #default="scope">
              <el-button
                type="warning"
                size="small"
                @click="handleEdit(scope.row.id)"
              >
                修改
              </el-button>
              <el-button
                type="danger"
                size="small"
                @click="handleDelete(scope.row.id)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- <el-pagination
          :page-size="5"
          :pager-count="5"
          layout="prev, pager, next"
          :total=""
          @current-change="handleCurrentChange"
        /> -->
      </el-card>
    </div>
</template>
<script setup>
    import {onMounted, ref} from "vue"
    import config from "../../config"
    const tableData=ref([])
    const fetchDate=()=>{
        try{
            fetch(config.API_HOST+`/artist/heritage_artists`).then(res=>res.json()).then(data=>{
                tableData.value=data
            })
        }catch(err){

        }
    }
  
    onMounted(()=>{
        fetchDate()
    })
</script>
<style scoped>

</style>